<template>
  <div class="tools-div">
    <el-button type="success" size="small"  @click="exportCategoryExcel">导出</el-button>
    <el-button type="primary"  size="small" @click="visible = true" >导入 </el-button>
  </div>
  <!---懒加载的树形表格-->
  <el-table
      :data="list"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="fetchData"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  >
    <el-table-column prop="name" label="分类名称" />
    <el-table-column prop="imageUrl" label="图标" #default="scope">
      <img :src="scope.row.imageUrl" width="50" />
    </el-table-column>
    <el-table-column prop="orderNum" label="排序" />
    <el-table-column prop="status" label="状态" #default="scope">
      {{ scope.row.status == 1 ? '正常' : '停用' }}
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" />
  </el-table>

  <el-dialog  v-model="visible" :show-close="false" width="50%  ">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">导入Excel</h4>
        <el-button type="danger" @click="close">
          <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
          Close
        </el-button>
      </div>
    </template>

    <el-upload
        v-model:file-list="fileList"
        class="upload-demo"
        :action="uploadUrl"
        multiple
        :on-remove="handleRemove"
        :limit="3"
        :headers="headers"
        :on-success="handleSuccess"
    >
      <el-button type="primary">Click to upload</el-button>
      <template #tip>
        <div class="el-upload__tip">
          只能上传Excel文件
        </div>
      </template>
    </el-upload>

  </el-dialog>

</template>

<script setup>
import {ElButton, ElDialog, ElMessage, ElMessageBox} from 'element-plus'
import { CircleCloseFilled } from '@element-plus/icons-vue'
import { ref,onMounted } from 'vue';
import {getCateListByParentId,exportExcel} from '@/api/category'
import {baseURL} from "@/utils/request";

import {useApp} from "@/pinia/modules/app";

const uploadUrl = baseURL+"/admin/system/Category/importExcel"

const visible = ref(false)
const list = ref([])
onMounted(()=>{
//获取根节点
  getCateListByParentId(0).then(res => {
    list.value = res.data
  })
})
// 定义list属性模型


// 加载数据的方法
const fetchData = async (row, treeNode, resolve) => {
  // 向后端发送请求获取数据
  const {data} = await getCateListByParentId(row.id)
  // 返回数据
  resolve(data)
}
const headers = ref({
  token : useApp().authorization.token,
})
//导出excel
const exportCategoryExcel = ()=>{
  exportExcel().then(res=>{

    //获取二进制数据
   let blob =  new Blob([res]);

   //创建a标签
    let link  = document.createElement(`a`)
    link.href = window.URL.createObjectURL(blob);
    link.download = "分类数据.xlsx"
    link.click();
  })
}

const handleRemove = ()=> (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

//成功后赋值
const handleSuccess =()=>{
  visible.value = false
  getCateListByParentId(0).then(res => {
    list.value = res.data
  })
}


</script>

<style scoped>
.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
}
</style>